import React, {memo, useEffect, useState} from 'react';

/**
 * 热门推荐模块
 */
import HeaderTitle from '@/components/header-title';
import SongsCover from '@/components/songs-cover';

import {HotRecommendStyle} from "./style";
import {shallowEqual, useDispatch, useSelector} from "react-redux";
import {getHomeRecommendsAction} from "../../../../store/actionCreators";
export default memo(function  HotRecommend() {

  const {hotRecommends} = useSelector((state)=>({
      hotRecommends:state.get("recommend").get("hotRecommends"),
  }),shallowEqual);


  console.log(hotRecommends);//此时，我们就获取到值了
  const dispatch=useDispatch();
  useEffect(()=>{
      dispatch(getHomeRecommendsAction(8));
  },[dispatch]);

  const [titleLink]=useState([//这里我们展示为了不报错，我们暂时不使用set函数
    {
      title:'华语',
      link:"https://www.yhuayi.com",
    },
    {
      title:'流行',
      link:"https://www.yhuayi.com",
    },
    {
      title:'摇滚',
      link:"https://www.yhuayi.com",
    },
    {
      title:'民谣',
      link:"https://www.yhuayi.com",
    },
    {
      title:'电子',
      link:"https://www.yhuayi.com",
    },
  ])
    return (
        <HotRecommendStyle>
          {/*这里我们解释一下这三个参数是干嘛的，
          */}
          <HeaderTitle title="热门推荐" titleLink={titleLink} isMore="更多" moreLink={"/more"}/>

          <div className="hot_recommend_cont">
            {
              hotRecommends.map((item)=>{
                // item.myMessage="我自己的个人信息，仅用于测试组件";
                  return <SongsCover key={item.id} message={item}/>
              })
            }
          </div>

        </HotRecommendStyle>
    );
  }
)
